import QtQuick 1.0
//import ShellInvoker 1.0
import "../../../common/lib/kdeadmouseutils-build-desktop"

Item {
    height: 100
    width:900
    id: detailVItem
    property bool playing : false
    Connections {
	    target: videoControl
	    onPlaying :{
	      detailVItem.playing=true;
	    }
	    onPausing :{
	      detailVItem.playing=false;
	    }
    }
    Connections {
	    target: actListRect
	    onAct : {
	      console.log('action:'+type);
	      appControl.willHideProgressBar();
	      if('plpause' == type){
		videoControl.pause();
	      }else  if('prev' == type){
		videoControl.relativeSeek(-2);
	      }else  if('next' == type){
		videoControl.relativeSeek(2);
	      }else  if('retour' == type){
		appControl.hideProgressBar();
	      }
	    }
    }
    
    //focus: true
    
    
    ListModel {
	  id : actVModel1
	  ListElement {
	      elt : 'prev'
	      src : "image/previousB.png" //previous
	  }
	  
	  ListElement {
	      elt : 'plpause'
	      src : "image/play.png"
	  }
	   ListElement {
	      elt : 'next'
	      src : "image/nextB.png"
	  }
	  
	  ListElement {
	      elt : 'retour'
	      src : "image/retour.png" 
	  }
	  /*ListElement {
	      elt : 'search'
	      src : "image/search.png" 
	  }
	  ListElement {
	      elt : 'wList'
	      src : "image/windowList.png"
	  }
	   ListElement {
	      elt : 'exit'
	      src : "image/exit.png"
	  }*/
	  
    }
    
    Rectangle {
	  id: actListRect
	  signal act(string type)
	  color: "#3E606F"
	  height: parent.height
	  width: parent.width
	  
	  //focus: true
	  anchors.centerIn: parent
	  //opacity: 0.5
	  //color: 'transparent'
	  //anchors.verticalCenter:parent.verticalCenter
	  smooth: true
	  ListView {
		  id: listVModel1
		  height: parent.height - 20
		  width: 300
		  anchors.centerIn: parent
		  focus: true
		  model:actVModel1
		  orientation : ListView.Horizontal
		  spacing : 35
		  delegate: Rectangle {
				  id:rectItem
				  smooth: true
				  color:'transparent'
				  width: 40
				  height: 40
				  //focus : elt=='plpause'?true:false
				  Rectangle {
				    id:rectBorder
				    color:'transparent'
				    anchors.fill:rectItem
				    visible:false
				    radius: 5
				    border.color:"red"
				    border.width:2
				  }
				  
				  Image {
					id:imgIcon
					anchors.fill:rectItem
					fillMode: Image.PreserveAspectFit
					source: elt!='plpause'? src : (detailVItem.playing?'image/pause.png':'image/play.png')
					smooth: true
				  }
				  
				  states: State {
					name: "active"; when: rectItem.activeFocus
					PropertyChanges { target: rectItem
							  scale: 1.5
					}
					PropertyChanges { target: rectBorder; visible: true }
				    }

				    transitions: Transition {
					NumberAnimation { properties: "scale"; duration: 100 }
				    }
				  
				  Keys.onReturnPressed : {
					actListRect.act(elt);
				  }
				  //handle events here
				    
				}
		  
	      }
	      Rectangle {
		  height: 20
		  width: parent.width
		  id:progressContainer
		  color: "#91AA9D"
		  radius: 5
		  anchors.bottom: parent.bottom
		  Rectangle {
			id:progressBar
			property double relativePos : 0.0
			color: 'red'
			height: parent.height
			width: parent.width * relativePos
			anchors.left:parent.left
			anchors.verticalCenter : parent.verticalCenter
			radius: 5
		  }
		      
		  Connections {
			  target: videoControl
			  onPositionNofify : {
			      progressBar.relativePos=positionRelative;      
			  }
		  }    
		  
	      }
	      
    }
        
    
}
 
